<template>
  <el-input
    placeholder="统计开始时间"
    class="search"
    suffix-icon="el-icon-search"
  ></el-input>
  <el-input
    placeholder="统计结束时间"
    class="search"
    suffix-icon="el-icon-search"
  ></el-input>
  <el-select class="search" v-model="value" placeholder="统计维度">
    <el-option
      v-for="(item, index) in options"
      :key="index"
      :label="item"
      :value="item"
    ></el-option>
  </el-select>
  <el-select class="search" v-model="value1" placeholder="租户类型">
    <el-option
      v-for="(item, index) in options1"
      :key="index"
      :label="item"
      :value="item"
    ></el-option>
  </el-select>
  <el-button type="primary">查询</el-button>
  <el-button>重置</el-button>
  <div ref="chartRef" style="width: 100%; height: 500px"></div>
  <div ref="chartRef1" style="width: 100%; height: 500px"></div>
  <div ref="chartRef2" style="width: 100%; height: 500px"></div>
</template>
<script>
import { onMounted, reactive, ref } from 'vue'
import * as echarts from 'echarts'
export default {
  setup() {
    const chartRef = ref(null)
    const chartRef1 = ref(null)
    const chartRef2 = ref(null)
    onMounted(() => {
      const chart = echarts.init(chartRef.value)
      const chart1 = echarts.init(chartRef1.value)
      const chart2 = echarts.init(chartRef2.value)
      const option = {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [
            '1',
            '2',
            '3',
            '4',
            '5',
            '6',
            '7',
            '8',
            '9',
            '10',
            '11',
            '12',
            '13',
            '14',
          ],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [
              820,
              932,
              901,
              934,
              1290,
              1330,
              1320,
              1500,
              1212,
              2334,
              1232,
              343,
              3432,
              2323,
            ],
            type: 'line',
            areaStyle: {},
          },
        ],
      }
      chart.setOption(option)
      const option1 = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)',
            },
          },
        ],
      }
      chart1.setOption(option1)
      const option2 = {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          top: '5%',
          left: 'center',
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' },
            ],
          },
        ],
      }
      chart2.setOption(option2)
    })
    var value = ref('')
    var value1 = ref('')
    const options = reactive(['租房', '转租', '退租', '续租'])
    const options1 = reactive(['个人', '企业'])
    return { options, options1, value, value1, chartRef, chartRef1, chartRef2 }
  },
}
</script>
<style>
.search {
  width: 15%;
  margin-bottom: 20px;
  margin-right: 20px;
}
</style>
